<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- <p>arr: {{ arr }}</p> -->
    <p>obj: {{ obj }}</p>
    <button v-on:click="handClick">btn</button>
  </div>

  <!-- <script src="../vue3.js"></script> -->
  <script src="../vue2.js"></script>

  <script>
    // 在vue3中，是有深度响应式的。数据嵌套的再深也不会导致响应式失效
    // vue2使用的是Object.defineProperty来实现响应式
    // vue3使用了es6的Proxy，解决了这个问题
    // const { createApp } = Vue;
    // createApp({
    //   data() {
    //     return {
    //       arr: [1,2,3]
    //     }
    //   },
    //   methods: {
    //     handClick() {
    //       this.arr[1] = 30;
    //     }
    //   }
    // }).mount("#app");



    // 在vue2中，特定情况下会失效
    // 1. 通过索引改变数组项
    // 2. 直接修改数组的length属性
    // 3. 再对象里面挂载新属性的时候会失效
    new Vue({
      data() {
        return {
          // arr: [1,2,3]
          obj: {a: 3, b: 4}
        }
      },
      methods: {
        handClick() {
          // this.arr[1] = 30;
          // this.arr.length = 2;
          // console.log(this.arr);
          // this.arr = [...this.arr];
          // this.arr = [].concat(this.arr);
          // this.arr = JSON.parse(JSON.stringify(this.arr));

          this.obj.c = 5;
          // this.obj = {...this.obj};
          // this.obj = Object.assign({}, this.obj);
          this.arr = JSON.parse(JSON.stringify(this.obj));
        }
      }
    }).$mount("#app");
  </script>
</body>
</html>